import '../App.css'
import { path } from '../config/index.ts'
import { useState, useEffect } from 'react'
import { TabBar, Toast } from 'antd-mobile'
import shopping from '../assets/blue.png'
import add from '../assets/add.png'
import big from '../assets/xiao.png'  // 已添加状态的图标
import { useNavigate, useLocation } from 'react-router-dom'
import { Checkbox, Stepper } from 'antd-mobile'
import { shoppingList, home, shoppingEdit, shoppingAdd } from '../api/index.ts' // 新增 shoppingAdd 导入
import {
    AppOutline,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons'

export default function Cart() {
    const [datas, setCartData] = useState<any>(null);
    const [recommendData, setRecommendData] = useState<any>(null);
    const userId = localStorage.getItem('uid');
    const navigate = useNavigate();
    const location = useLocation();
    // 存储购物车商品的选中状态，key为商品id，value为是否选中
    const [checkedMap, setCheckedMap] = useState<Record<string, boolean>>({});
    // 全选状态
    const [isAllChecked, setIsAllChecked] = useState(false);
    // 新增：跟踪已添加的商品ID（用于“猜你喜欢”区域图标切换）
    const [addedCommodities, setAddedCommodities] = useState<Set<string>>(new Set());


    // --- 核心修改1：封装 fetchCartList 函数（与 Index 组件一致）---
    // 重新请求购物车列表的函数（同步 cartData + addedCommodities 状态）
    const fetchCartList = async (userId: string) => {
        try {
            const cartListRes = await shoppingList({ id: userId });
            const cartList = cartListRes.data || [];
            setCartData(cartList);

            // 将购物车中已存在的商品ID添加到集合中（用于图标切换）
            const addedIds = new Set<string>();
            cartList.forEach((item: any) => {
                if (item.commodity && item.commodity.length > 0) {
                    addedIds.add(item.commodity[0].id);
                }
            });
            setAddedCommodities(addedIds);

        } catch (error) {
            console.error('获取购物车列表失败:', error);
            Toast.show('获取购物车列表失败');
        }
    };


    useEffect(() => {
        const fetchData = async () => {
            try {
                if (userId) {
                    // 初始化时请求购物车列表（调用封装的 fetchCartList）
                    await fetchCartList(userId);
                }

                // 请求“猜你喜欢”数据
                const recommendRes = await home({});
                setRecommendData(recommendRes.data);
                console.log('猜你喜欢数据:', recommendRes.data);

            } catch (error) {
                console.error('接口请求失败:', error);
            }
        };

        fetchData();
    }, [userId]);


    // 监听商品选择状态变化，同步全选状态（原有逻辑保留）
    useEffect(() => {
        if (datas && datas.length > 0) {
            const allItemIds = datas.map((item: any) => item.commodity[0]?.id || '').filter(Boolean);
            const allChecked = allItemIds.every(id => checkedMap[id]);
            setIsAllChecked(allChecked);
        }
    }, [checkedMap, datas]);


    const tabs = [
        {
            key: '/',
            title: '首页',
            icon: <AppOutline />,
            onClick: () => navigate('/')
        },
        {
            key: '/category',
            title: '分类',
            icon: <UnorderedListOutline />,
            onClick: () => navigate('/category')
        },
        {
            key: '/cart',
            title: '购物车',
            icon: (active: boolean) => <img src={active ? shopping : shopping} alt="" style={{ width: '24px', height: '24px' }} />,
            onClick: () => navigate('/cart')
        },
        {
            key: '/mine',
            title: '我的',
            icon: <UserOutline />,
            onClick: () => navigate('/mine')
        },
    ]

    const activeKey = tabs.find(tab => location.pathname === tab.key)?.key || '/';


    // --- 核心修改2：修改购物车数量编辑逻辑（调用 fetchCartList 同步数据）---
    const handleQuantityChange = async (cartId: string, newNum: number) => {
        try {
            const res = await shoppingEdit({
                id: cartId,
                num: newNum.toString()
            });
            if (res.code === 1) {
                console.log('购物车数量修改成功');

                // 重新请求购物车列表，同步最新数据（与 Index 组件逻辑一致）
                if (userId) {
                    await fetchCartList(userId);
                }
            } else {
                console.error(`购物车数量修改失败：${res.message || '未知错误'}`);
                Toast.show('数量修改失败');
            }
        } catch (error) {
            console.error('调用 shoppingEdit 接口失败:', error);
            Toast.show('数量修改失败，请稍后重试');
        }
    };


    // 处理购物车商品复选框点击（原有逻辑保留）
    const handleCartItemCheck = (itemId: string) => {
        setCheckedMap(prev => ({
            ...prev,
            [itemId]: !prev[itemId]
        }));
    };


    // 处理全选复选框点击（原有逻辑保留）
    const handleAllCheck = () => {
        if (datas && datas.length > 0) {
            const newIsAllChecked = !isAllChecked;
            setIsAllChecked(newIsAllChecked);
            const newCheckedMap: Record<string, boolean> = {};
            datas.forEach((item: any) => {
                newCheckedMap[item.commodity[0]?.id || ''] = newIsAllChecked;
            });
            setCheckedMap(newCheckedMap);
        }
    };


    // 计算选中商品的总价格和总数量（原有逻辑保留）
    const calculateTotal = () => {
        let totalPrice = 0;
        let totalCount = 0;
        if (datas && datas.length > 0) {
            datas.forEach((item: any) => {
                const itemId = item.commodity[0]?.id || '';
                if (checkedMap[itemId]) {
                    const price = parseFloat(item.commodity[0]?.price || '0');
                    const num = item.num || 1;
                    totalPrice += price * num;
                    totalCount += num;
                }
            });
        }
        return { totalPrice, totalCount };
    };

    const { totalPrice, totalCount } = calculateTotal();


    // --- 核心修改3：添加购物车方法（与 Index 组件完全一致）---
    const handleAddToCart = async (commodityId: string) => {
        // 从本地存储获取user_id
        const userId = localStorage.getItem('uid');
        if (!userId) {
            console.log('用户ID获取失败，请重新登录');
            Toast.show('用户ID获取失败，请重新登录');
            return;
        }

        try {
            // 查找购物车中是否已存在该商品（修复原代码中 cartData 未引用的问题）
            const existingCartItem = datas?.find((item: any) =>
                item.commodity && item.commodity.some((comm: any) => comm.id === commodityId)
            );

            if (existingCartItem) {
                // 存在，调用编辑接口，数量加一
                const editRes = await shoppingEdit({
                    id: existingCartItem.id, // 购物车id
                    num: (parseInt(existingCartItem.num) + 1).toString() // 数量加一
                });
                if (editRes.code === 1) {
                    console.log('编辑购物车成功');
                    Toast.show('购物车商品数量加一');
                    // 重新请求购物车列表，同步数据
                    await fetchCartList(userId);
                } else {
                    console.error(`编辑购物车失败：${editRes.message || '未知错误'}`);
                    Toast.show('编辑购物车失败');
                }
            } else {
                // 不存在，调用新增接口
                const addRes = await shoppingAdd({
                    user_id: userId,
                    commodity_id: commodityId,
                    num: '1'
                });
                console.log('shoppingAdd 接口返回', addRes);
                if (addRes.code === 1) {
                    console.log('添加购物车成功');
                    Toast.show('已添加到购物车');
                    // 重新请求购物车列表，同步数据
                    await fetchCartList(userId);
                } else {
                    console.error(`添加购物车失败：${addRes.message || '未知错误'}`);
                    Toast.show('添加购物车失败');
                }
            }
        } catch (error) {
            console.error('购物车操作请求失败:', error);
            Toast.show('购物车操作失败，请稍后重试');
        }
    };


    return (
        <div>
            <div className='white top'>购物车</div>
            {/* 购物车商品渲染（原有逻辑保留） */}
            <div className='white m10' style={{ borderRadius: '10px', padding: '10px 0px 1px 0px' }}>
                {datas && datas.length > 0 ? (
                    datas.map((item: any, index: number) => {
                        const itemId = item.commodity[0]?.id || '';
                        return (
                            <div className='cart-display' style={{ display: 'flex', alignItems: 'center' }} key={index}>
                                <div onClick={() => handleCartItemCheck(itemId)} className='cart-display' style={{ marginLeft: '10px' }}>
                                    <Checkbox checked={checkedMap[itemId] || false} />
                                </div>
                                <img
                                    src={path + item.commodity[0]?.image || 'https://img.xiaopiu.com/userImages/img17093318ac118f568.jpg'}
                                    alt={path + item.commodity[0]?.title || ''}
                                    style={{ width: '95px', height: '95px', marginRight: '10px', marginLeft: '10px' }}
                                />
                                <div className='h20 w60'>
                                    <div className='h35'>{item.commodity[0]?.title || ''}</div>
                                    <div className='cart-displayes' style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                        <div>
                                            <span className='red' style={{ marginRight: '5px' }}>￥{item.commodity[0]?.price || '0.00'}</span>
                                            <s>￥999</s>
                                        </div>
                                        <div key={item.id}>
                                            <Stepper
                                                min={1}
                                                max={10}
                                                value={item.num}
                                                onChange={(val) => handleQuantityChange(item.id, val)}
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        );
                    })
                ) : (
                    <div className='white m10' style={{ textAlign: 'center', padding: '20px' }}>
                        购物车为空~
                    </div>
                )}
            </div>

            {/* 猜你喜欢区域（原有逻辑保留） */}
            <div className='w100'>
                <img src="https://img.xiaopiu.com/userImages/img17176718ac69291e8.png" alt="" className='width' />
                <span>猜你喜欢</span>
                <img src="https://img.xiaopiu.com/userImages/img17177018ac6930b00.png" alt="" className='w20' />
            </div>

            {/* --- 核心修改4：猜你喜欢商品渲染（添加 handleAddToCart 点击事件 + 图标切换）--- */}
            <div className="column">
                {recommendData?.commodity?.map((item, index) => (
                    <div className="list_box" key={index}>
                        <div className="list_item">
                            <img
                                src={path + item.image || 'https://img.xiaopiu.com/userImages/img17095018ac1206f78.jpg'}
                                alt={item.title}
                            />
                            <div className='m7'>
                                {item.title}
                            </div>
                        </div>
                        <div className="icon_img">
                            <div style={{ display: 'flex', alignItems: 'center' }}>
                                <span className='red'>￥{item.price}</span>
                            </div>
                            <div>
                                {/* 根据商品是否已添加，显示不同图标 + 绑定添加购物车事件 */}
                                <img
                                    src={addedCommodities.has(item.id) ? big : add}
                                    alt={addedCommodities.has(item.id) ? "已添加" : "添加"}
                                    className='width'
                                    onClick={() => handleAddToCart(item.id)} // 绑定添加事件
                                />
                            </div>
                        </div>
                    </div>
                ))}
            </div>

            <div style={{ height: '135px' }}></div>
            {/* 结算（原有逻辑保留） */}
            <div className='position'>
                <div onClick={handleAllCheck} className='center gap' style={{ marginLeft: '10px' }}>
                    <Checkbox checked={isAllChecked} />
                    <div>全选</div>
                </div>
                <div className='red center gap'>
                    <span>合计：￥{totalPrice.toFixed(2)}</span>
                    <div className='button'>
                        结算<span>({totalCount})</span>
                    </div>
                </div>
            </div>

            {/* 底部导航栏（原有逻辑保留） */}
            <TabBar activeKey={activeKey} onChange={(key) => {
                const tab = tabs.find(tab => tab.key === key);
                if (tab) {
                    tab.onClick();
                }
            }}>
                {tabs.map(item => (
                    <TabBar.Item
                        key={item.key}
                        icon={item.icon}
                        title={item.title}
                        onClick={item.onClick}
                    />
                ))}
            </TabBar>
        </div>
    )
}